<template>
  <div>
    <el-dialog ref="dialogElement" :title="title" v-model="show" @close="close" :width="width"  top="3vh" >

      <template #header>
      <slot name="header"></slot>
    </template>
      <slot :closeDialog="close"/>
      <template #footer>
      <slot name="footer"></slot>
    </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">

const dialogElement = ref(null);
const props = withDefaults(
  defineProps<{
    modelValue: any;
    title?: string;
    width?: number;
    mode?: 'form';
    closeOnClickModal?: boolean;
  }>(),
  {
    width:500
  }
)
const show = ref(props.modelValue)
watch(
  () => props.modelValue, // 监听 props.modelValue 的变化
  (newVal) => {
    console.log('我的show变化了')
    show.value = newVal; // 更新 show 的值
  }
);
const emit = defineEmits(['update:modelValue','onOpen']);

if(show){emit("onOpen")}

const close = () => {
  emit('update:modelValue', false)
}
const form = ref({})
</script>

<style scoped></style>
